<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="分配用戶"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <vxe-table
          ref="mytable"
          :data="tableData"
          style="width: 100%; margin-top: 10px;margin-bottom: 10px"
          border
          highlight-current-row
          @checkbox-change="handleSelectionChange"
          @checkbox-all="handleAllSelectChang"
        >
          <vxe-column type="checkbox" width="40" />
          <vxe-column field="userName" title="用户名称"></vxe-column>
          <vxe-column field="userNo" title="用户账号"></vxe-column>
        </vxe-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      checked:true,
      personList: [],
      tableData: [
        { id: '1', userName: 'John', userNo: 'aaaaa' },
        { id: '2', userName: 'John2', userNo: 'aaaaa2' },
        { id: '3', userName: 'John3', userNo: 'aaaaa3' },
        { id: '4', userName: 'John4', userNo: 'aaaaa4' },
      ],
    }
  },
  methods: {
    initData(row, list) {
      this.dialogVisible = true;
      this.personList = list
      this.$nextTick(() => {
        this.$refs.mytable.clearCheckboxRow()
      })
      this.getUserList()
    },
    getUserList() {

      setTimeout(() => {
        // let res = res.data
        // this.tableData = res.records
        this.$nextTick(() => {
          this.$refs.mytable.clearCheckboxRow()
          if(Array.isArray(this.personList)) {
            this.personList.forEach(e => {
              this.$refs.mytable.setCheckboxRow(e, true)
            })
          }
        })
      }, 1000)
    },
    handleConfirm() {
      this.$emit('onChange', this.personList)
      this.dialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },

    handleSelectionChange(personRow) {
      this.personList = personRow.records;
      console.log(this.personList, "personList");
    },
    handleAllSelectChang({ checked, records }) {
      this.personList = records;
      console.log(this.personList, "multipleSelection");
    },

    

  }
}
</script>

<style>

</style>
